/**
 * @file _axiom-mobile-list.scss
 * @description AxiomMobileList 移动端列表组件样式
 */
@use '../../../styles/variables' as *;

.axiom-mobile-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  // 精确计算：减去header(60px) + tabbar(60px) + 边距(20px)
  min-height: calc(100vh - var(--axiom-mobile-list-occupied-height, 140px));
  
  .list-header {
    margin-bottom: var(--axiom-spacing-md, 16px);
    flex-shrink: 0; // 防止头部被压缩
  }
  
  .list-stats {
    margin-bottom: var(--axiom-spacing-md, 16px); // 只保留底部边距
    flex-shrink: 0; // 防止统计区域被压缩
    
    .stats-grid {
      display: flex;
      justify-content: center;
      
      .stat-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--axiom-spacing-xxs, 4px);
      }
    }
  }
  
  .list-container {
    flex: 1; // 占据剩余空间
    min-height: 50vh; // 减小最小高度，保证滚动但减少空白
  }
  
  .list-content {
    height: 100%;
    overflow-y: auto;
    padding: 0; // 移除内边距，使用外边距
    touch-action: pan-y; // 允许垂直滚动
    -webkit-overflow-scrolling: touch; // iOS平滑滚动
    scroll-behavior: smooth; // 平滑滚动行为
    
    // 优化滚动条
    &::-webkit-scrollbar {
      width: var(--axiom-scrollbar-width-thin, 4px);
    }
    
    &::-webkit-scrollbar-track {
      background: transparent;
    }
    
    &::-webkit-scrollbar-thumb {
      background: var(--border-color);
      border-radius: var(--axiom-scrollbar-thumb-border-radius, 2px);
    }
    
    display: flex;
    flex-direction: column;
    gap: var(--axiom-spacing-sm, 12px);
    padding: var(--axiom-spacing-md, 16px) 0; // 添加上下内边距，保持列表项间距
    min-height: inherit; // 继承父容器的最小高度
  }
  
  .list-item-card {
    border-radius: var(--axiom-card-border-radius-large, 16px);
    background: var(--bg-color-secondary);
    box-shadow: var(--axiom-shadow-base);
    transition: all var(--axiom-transition-duration-base) ease;
    overflow: hidden;
    border: 1px solid var(--border-color-light);
    cursor: pointer;
    min-height: var(--axiom-mobile-list-item-min-height, 140px);
    
    // 移动端边距，与卡片保持一致
    @media (max-width: 768px) {
      margin-left: var(--axiom-spacing-md, 16px);
      margin-right: var(--axiom-spacing-md, 16px);
    }

    @media (max-width: 480px) {
      margin-left: var(--axiom-spacing-sm, 12px);
      margin-right: var(--axiom-spacing-sm, 12px);
    }
    
    &:hover {
      transform: translateY(var(--axiom-card-hover-translate-y, -2px));
      box-shadow: var(--axiom-shadow-hover);
    }
    
    &:active {
      transform: translateY(0);
    }
    
    .list-item {
      height: 100%;
      padding: 0; // 移除内边距，让CCard控制
      
      .item-content {
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: var(--axiom-spacing-xs, 8px);
        padding: var(--axiom-spacing-md, 16px);
        
        .item-header {
          flex-shrink: 0;
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          min-height: var(--axiom-mobile-list-header-min-height, 32px);
          
          .axiom-title {
            flex: 1;
            margin-right: var(--axiom-spacing-sm, 12px);
            line-height: 1.4;
            
            // 控制标题字体大小
            h1, h2, h3, h4, h5, h6 {
              font-size: var(--axiom-font-size-md, 16px);
              line-height: 1.4;
              margin: 0;
              font-weight: var(--axiom-font-weight-semibold, 600);
            }
          }
          
          .axiom-tag {
            flex-shrink: 0;
            font-size: var(--axiom-font-size-xxs, 11px);
          }
        }
        
        .item-description {
          flex-shrink: 0;
          min-height: var(--axiom-mobile-list-desc-min-height, 20px);
          line-height: 1.4;
          
          .axiom-text {
            font-size: var(--axiom-font-size-sm, 13px);
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            color: var(--text-color-secondary);
          }
        }
        
        .item-fields-section,
        .item-tags-section {
          flex: 1;
          
          .field-item {
            .axiom-text {
              font-size: var(--axiom-font-size-xs, 12px);
              line-height: 1.3;
              word-break: break-word;
              
              // 处理长文本
              &[data-long="true"] {
                font-size: var(--axiom-font-size-xxs, 11px);
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }
          }
        }
        
        .item-actions-section {
          flex-shrink: 0;
          margin-top: auto; // 推到底部
          min-height: var(--axiom-mobile-list-actions-min-height, 32px);
          display: flex;
          align-items: center;
          
          .axiom-button {
            font-size: var(--axiom-font-size-xs, 12px);
            padding: var(--axiom-btn-padding-y-sm, 6px) var(--axiom-btn-padding-x-sm, 12px);
          }
        }
      }
    }
  }
  
  .loading-container,
  .finished-container,
  .error-container,
  .empty-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--axiom-spacing-lg, 24px);
    gap: var(--axiom-spacing-sm, 12px);
  }
  
  .error-container {
    flex-direction: column;
  }
} 